<template>
	<view class="fahuo">
		<view class="fahuo_main">

			<view class="main">
				<view class="title">转赠商品</view>
				<view class="box" v-for="(item, index) in boxData.list" :key="index">
					<img :src="item.goods_image_text" alt="" />
					<view class="right_box">
						<view class="biaoti">{{ item.goods_name }}</view>
						<view class="biaoqian">
							<text class="biaoqian_box" v-for="(data, index) in item.service_lab"
								:key="index">{{ data }}</text>
						</view>
						<view class="price_line">
							<view class="price">
								<text class="fuhao">￥</text>
								<text class="price_num">{{ item.original_price }}</text>
							</view>
							<view class="shu_box">
								<text class="fuhao">x</text>
								<text class="shuliang">{{ item.number }}</text>
							</view>
						</view>
					</view>
				</view>

			</view>


			<view class="shuoming_box">
				<view class="mt10" style="padding:30rpx;color:#000;">

					<view v-if="cindex==0">
						<view class="mt10">
							<u-search @search="searchchang" @custom="searchchang" placeholder="输入手机号搜索"
								v-model="keyword"></u-search>
						</view>
						<view class="mt10">
							<u-radio-group :wrap="true" class="" style="width:100%;" v-model="radiovalue" placement="column"
								@change="groupChange1">
								<u-radio class="flex-row flex1 flex-ju-b  mb10" style="width:100%;"
									:customStyle="{marginBottom: '8px'}" v-for="(item, index) in radiolist" :key="index"
									:label="item.nickname" :name="item.nickname" @change="radioChanges(item)">
									<view class="flex-a-i">
										<image :src="item.avatar" class="ml5" style="width:30px;" mode="widthFix"></image>
										{{item.nickname}}
									</view>
								</u-radio>
							</u-radio-group>
						</view>
						
					</view>
					
					<view class="pay  flex-ju-c">
					
						<button v-if="cindex==1" open-type="share" class="pay_btn">确认转赠</button>
						<button v-if="cindex==0" class="pay_btn" @click="onClickHandle">确认转赠</button>
					
					</view>

				</view>
			</view>


			
		</view>

	</view>
</template>
<script>
	export default {
		name: '',
		data: () => ({
			indexjia:0,
			transfer_id:"",
			ids:[],
			cindex:"",
			boxData: {},
			mobile:"",
			keyword: "",
			radiovalue: "",
			radiolist: [],
		}),
		// 计算属性 适配者模式
		computed: {},
		// 数据监听
		watch: {},
		created() {},
		mounted() {

		},
		async onShareAppMessage() {
			
			var cc
			 await this.lisk().then(res=>{
				  var pageurl = '/pages/index/index?transfer_id='+res
				    cc=res
			  })
			  
			  var pageurl = '/pages/index/index?transfer_id='+cc
			  return {
			    title: '好友赠送你个玩具',
			    path: pageurl,
			  imageUrl:this.boxData.list[0].goods_image_text,
			    success(res) {
			      // 分享成功的回调函数
			      console.log('分享成功');
			    },
			    fail(err) {
			      // 分享失败的回调函数
			      console.log('分享失败', err);
			    }
			  };
			  
			
		    },
		onLoad(option) {
			//盒柜传过来的商品id
			this.ids = this.$Route.query.ids;
			//获取商品列表
			this.affirm_deliverList();
			
			this.cindex = this.$Route.query.index
			
			if(this.$Route.query.index == 1){
				// this.$http('v1.boxcabinetTransfer', {
				// 	ids:this.ids,
				// 	user_id:''
				// }, '请稍等').then(
				// 	(res) => {
				// 		this.transfer_id = res.data.list[0].transfer_id
				// })
			}
			
		},
		// 监听页面显示。页面每次出现在屏幕上都触发 包括从下级页面点返回露出当前页面
		onShow() {
           this.indexjia++
		   if(this.indexjia>1){
			   uni.redirectTo({
			   	url:"/pages/index/zeng"
			   })
		   }
		},
		// 监听页面初次渲染完成 注意如果渲染速度快，会在页面进入动画完成前触发
		onReady() {},
		// 监听页面隐藏
		methods: {
			  lisk(){
				  
				 return new Promise(resolve => {
					  this.$http('v1.boxcabinetTransfer', {
					  					ids:this.ids,
					  					user_id:''
					  }, '请稍等').then(
					  					(res) => {
								// console.log(res.data.list[0].transfer_id)
								let id = res.data.list[0].transfer_id
								// return id
								resolve(id)
								return id
					  })
				  })
				  
				 
			  },
			onClickHandle() {
				if(!this.mobile){
					uni.showToast({
						title:"选择转赠人",
						icon:"none"
					})
					return
				}
				
				this.$http('v1.boxcabinetTransfer', {
					ids:this.ids,
					user_id:this.mobile
				}, '请稍等').then(
					(res) => {
						uni.showToast({
							title:"转赠成功",
							icon:"none"
						})
						setTimeout(()=>{
							uni.redirectTo({
								url:"/pages/index/zeng"
							})
						},700)
				})
					
			},
			radioChanges(e){
				console.log("rrr",e.mobile)
				this.mobile = e.user_id
			},
			radioChange(e){
				
			},
			groupChange1(e){
				console.log(e)
			},
			searchchang(e) {
				this.$http('v1.userscheckuser', {
					mobile:this.keyword
				}, '请稍等').then(
					(res) => {
						this.radiolist = res.data
					})
			},
			affirm_deliverList() {
				return new Promise((resolve, reject) => {
					this.$http('v1.affirm_deliverList', {
						ids: this.ids
					}, '请稍等').then(
						(res) => {
							if (res.code === 1) {
								res.data.actlist = []
								for (var i = res.data.list.length - 1; i >= 0; i--) {
									if (res.data.list[i].act_goods > 0) {
										if (res.data.list[i].act_goods == res.data.list[i].number) {
											res.data.actlist.push(res.data.list[i])
											res.data.list.splice(i, 1)
										} else {
											res.data.list[i].number = res.data.list[i].number - res.data.list[
												i].act_goods
											res.data.actlist.push(res.data.list[i])
										}
									}
								}
								this.boxData = res.data;
								resolve(res.data);
							} else {
								reject();
							}
						}
					);
				});
			},


		},
	};
</script>
<style lang="scss" scoped>
	.fahuo {
		.fahuo_main {
			padding: 20rpx 54rpx 140rpx;

			.topA {
				width: 640rpx;
				height: 118rpx;
				border-radius: 10rpx 10rpx 10rpx 10rpx;
				padding-top: 50rpx;
				padding-left: 40rpx;
				padding-right: 40rpx;
				box-sizing: border-box;
				background-image: url(./images/xuxian.png);
				background-size: cover;
				background-repeat: no-repeat;

				.top_box {
					width: 100%;
					height: 20rpx;
					align-items: center;

					.left {
						float: left;
						margin-right: 14rpx;
					}

					.add_text {
						float: left;
						font-size: 21rpx;
						font-family: PingFang SC-Bold, PingFang SC;
						font-weight: 400;
						color: #3d3d3d;
						line-height: 20rpx;
					}

					.right {
						float: right;
					}
				}
			}

			.topB {
				width: 640rpx;
				height: 118rpx;
				background: #ffffff;
				border-radius: 10rpx 10rpx 10rpx 10rpx;
				padding-left: 4rpx;
				padding-top: 4rpx;
				padding-right: 4rpx;
				box-sizing: border-box;
				background-image: url(./images/xuxian.png);
				background-size: cover;
				background-repeat: no-repeat;

				.top_box {
					height: 111rpx;
					display: flex;
					align-items: center;
					background-color: #fff;

					.left {
						width: 48rpx;
						height: 22rpx;
						background: #d5c7ff;
						border-radius: 6rpx 6rpx 6rpx 6rpx;
						font-size: 14rpx;
						font-family: PingFang SC-Bold, PingFang SC;
						font-weight: 400;
						color: #3d3d3d;
						line-height: 22rpx;
						text-align: center;
						margin-left: 35rpx;
					}

					.center {
						flex: 1;
						margin-left: 30rpx;

						.top {
							margin-top: -10rpx;

							.first {
								font-size: 18rpx;
								font-family: PingFang SC-Bold, PingFang SC;
								font-weight: 400;
								color: #3d3d3d;
								// line-height: 24rpx;
							}

							.last {
								font-size: 16rpx;
								font-family: PingFang SC-Bold, PingFang SC;
								font-weight: 400;
								color: #3d3d3d;
								margin-left: 20rpx;
							}
						}

						.bottom {
							font-size: 18rpx;
							font-family: PingFang SC-Bold, PingFang SC;
							font-weight: 400;
							color: #939393;
							margin-top: 12rpx;
						}
					}

					.right {
						margin-right: 28rpx;
					}
				}
			}

			.main {
				margin-top: 18rpx;
				width: 100%;
				padding: 20rpx 22rpx;
				background: #ffffff;
				border-radius: 10rpx 10rpx 10rpx 10rpx;

				.title {
					font-size: 22rpx;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: 700;
					color: #111111;
				}

				.box {
					width: 100%;
					height: 160rpx;
					display: flex;
					margin-top: 34rpx;
					margin-bottom: 26rpx;

					img {
						width: 160rpx;
						height: 160rpx;
					}

					.right_box {
						margin-left: 23rpx;
						flex: 1;

						.biaoti {
							font-size: 28rpx;
							font-family: PingFang SC-Bold, PingFang SC;
							font-weight: 700;
							color: #111111;
						}

						.biaoqian {
							margin-top: 6rpx;
							margin-bottom: 9rpx;

							.biaoqian_box {
								border-radius: 8rpx 8rpx 8rpx 8rpx;
								opacity: 1;
								border: 1rpx solid #d5c7ff;
								padding: 7rpx;
								font-size: 18rpx;
								font-family: PingFang SC-Medium, PingFang SC;
								font-weight: 400;
								color: #d5c7ff;
								margin-right: 12rpx;
								display: inline-block;
								box-sizing: border-box;
							}
						}

						.shuoming {
							font-size: 18rpx;
							font-family: PingFang SC-Medium, PingFang SC;
							font-weight: 400;
							color: #8c8c8c;
						}

						.price_line {
							display: flex;
							justify-content: space-between;

							.price {
								.fuhao {
									font-size: 28rpx;
									font-family: Source Han Sans CN-Normal, Source Han Sans CN;
									font-weight: 350;
									color: #de3249;
								}

								.price_num {
									font-size: 28rpx;
									font-family: DIN-Bold;
									font-weight: 700;
									color: #de3249;
								}
							}

							.shu_box {
								box-sizing: border-box;
								padding: 0 24rpx;
								background: #ffffff;
								border-radius: 214rpx 214rpx 214rpx 214rpx;
								opacity: 1;
								border: 1rpx solid rgba(204, 204, 204, 0.6);
								text-align: center;
								line-height: 32rpx;

								.fuhao {
									font-size: 20rpx;
									font-family: PingFang SC-Medium, PingFang SC;
									font-weight: 400;
									color: #3d3d3d;
								}

								.shuliang {
									font-size: 24rpx;
									font-family: Oswald-Regular, Oswald;
									font-weight: 700;
									color: #3d3d3d;
								}
							}
						}
					}
				}

				.line {
					width: 100%;
					height: 40rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 26rpx;

					.left {
						font-size: 20rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 400;
						color: #111111;
					}

					.right {
						font-size: 18rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 400;
						color: #8c8c8c;

						.icon {
							margin-left: 20rpx;
						}
					}
				}

				.beizhu {
					display: flex;
					width: 100%;
					height: 40rpx;
					align-items: center;
					margin-bottom: 26rpx;

					.left {
						font-size: 20rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 400;
						color: #111111;
						margin-right: 44rpx;
					}

					/deep/ input {
						font-size: 18rpx;
						flex: 1;
					}
				}

				.bottom {
					display: flex;
					justify-content: flex-end;
					align-items: center;
					margin-bottom: 26rpx;

					.xiaoji {
						font-size: 16rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 400;
						color: #111111;
						margin-right: 30rpx;
					}

					.fuhao {
						font-size: 24rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 400;
						color: #de3249;
					}

					.price {
						font-size: 24rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 700;
						color: #de3249;
					}
				}
			}

			.shuoming_box {
				width: 640rpx;
				background: #ffffff;
				border-radius: 10rpx 10rpx 10rpx 10rpx;
				margin-top: 30rpx;

				.title {
					font-size: 22rpx;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: 700;
					color: #111111;
					margin-left: 22rpx;
					height: 40rpx;
					line-height: 50rpx;
					padding-top: 7px;
				}


			}

			.mustKnow {
				height: 36rpx;
				width: 100%;
				display: flex;
				align-items: center;
				margin-top: 18rpx;

				.left {
					font-size: 22rpx;
					font-family: PingFangSC-Light-Regular, PingFangSC-Light;
					font-weight: 400;
					color: #646465;
				}

				.right {
					font-size: 22rpx;
					font-family: PingFangSC-Regular-Regular, PingFangSC-Regular;
					font-weight: 400;
					color: #111111;
				}
			}

		}

	

			.heji {
				font-size: 24rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 400;
				color: #111111;
				margin-right: 16rpx;
			}

			.fuhao {
				font-size: 36rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 400;
				color: #de3249;
			}

			.sum_price {
				font-size: 36rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 700;
				color: #de3249;
			}

			.pay_btn {
				width: 100%;
				height: 76rpx;
				background: #a084f0;
				border-radius: 168rpx 168rpx 168rpx 168rpx;
				font-size: 30rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: 400;
				color: #ffffff;
				line-height: 76rpx;
				text-align: center;
			}

			.quePay_btn {
				width: 207rpx;
				height: 76rpx;
				background: #2ce174;
				border-radius: 168rpx 168rpx 168rpx 168rpx;
				font-size: 30rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: 400;
				color: #ffffff;
				line-height: 76rpx;
				text-align: center;
				margin-left: 50rpx;
			}

	}
</style>